<template>
    <div>
        <div class="outdiv biaoti">推送消息</div>
        <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">

        <div class="outdiv">
            <el-button class="xiajuli" type="add" icon="el-icon-plus" @click="addNews">发布新消息</el-button>
        </div>
        <div class="outdiv">
            <el-table :data="allnews" height="250" border style="width: 100%">
                <el-table-column prop="info_id" label="消息编号" width="180">
                </el-table-column>
                <el-table-column prop="informationDes" label="推送内容">
                </el-table-column>
                <el-table-column prop="information_time" label="推送时间" width="180">
                </el-table-column>
                <el-table-column prop="pusherName" label="推送者" width="100">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <!-- 删除按钮 -->
                        <el-popconfirm @onConfirm="handleDelete(scope.row)" title="确定删除这条信息吗？">
                            <el-button style="margin-left:10px;" plain slot="reference" size="small" type="danger"
                                icon="el-icon-delete" circle>
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

        </div>

        <!-- 弹框 -->
        <el-dialog title="发布新消息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="发布内容">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-checkbox-group v-model="checkedCities">
                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addnewsOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import * as api from '../../utils/api'
    export default {
        name: 'sendMsg',
        data() {
            return {
                allnews: [],
                userid:'',
                form: {
                    desc: ''
                },
                dialogFormVisible: false,
                formLabelWidth: '120px',
                // checkAll: false,
                checkedCities: [],
                cities: ['用户', '司机'],
                isIndeterminate: true
            }
        },

        created() {
            /* 这里查询所有推送的消息 */
            this.getNews()
            this.userid= this.$store.state.msgCount.user.user_id
        },

        methods: {
            getNews() {
                this.axios({
                    url: api.GET_QUERYINFORM,
                    method: 'get',
                    params: {}
                }).then(data => {
                    this.allnews = data.data.data
                })
            },

            /* 删除按钮 */
            handleDelete(row) {
                this.axios({
                    url: api.POST_DELINFORM,
                    method: 'post',
                    data: {
                        info_id: row.info_id
                    }
                }).then(data => {
                    if (data.data.code === 200) {
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });
                        this.getNews()
                    } else {
                        this.$message.error('删除失败！')
                    }
                })
            },
            /* 发布新消息按钮 */
            addNews() {
                this.form.desc = ''
                this.checkedCities = [],
                    this.dialogFormVisible = true
            },
            /* 推送消息 */
            addnewsOk() {
                // console.log(this.userid)
                this.axios({
                    url: api.POST_ADDINFORM,
                    method: 'post',
                    data: {
                        informationDes: this.form.desc,
                        pusherId: this.userid, //登录者的id
                        receiver: this.checkedCities
                    }
                }).then(data => {
                    if (data.data.code === 200) {
                        this.$message({
                            message: '发布消息成功！',
                            type: 'success'
                        });
                        this.getNews()
                    } else {
                        this.$message.error('消息推送失败！')
                    }
                })
                this.dialogFormVisible = false
            }
        }
    }
</script>

<style lang="less" scoped>

    /deep/.el-table .cell {
        text-align: center;
    }
/* 新增按钮 */
.el-button--add:hover {
    color: rgb(240, 248, 255);
    background-color: rgb(148, 197, 238);
    border-color: rgb(148, 197, 238);
}

.el-button--add {
    color: rgb(148, 197, 238);
    background-color: rgb(240, 248, 255);
    border-color: rgb(148, 197, 238);
}
</style>